<template>
  <div class="instoveReport">
    <!-- <el-divider style="margin:8px 0;"></el-divider> -->
    <el-radio-group v-if="twoStove" size="mini" class="isTow" v-model="twoStoveSelect">
      <el-radio-button :label="true">A炉</el-radio-button>
      <el-radio-button :label="false">B炉</el-radio-button>
    </el-radio-group>
    <el-select
      popper-class="onlySelect"
      ref="selectDom"
      v-model="stoveValue"
      size="small"
      @change="chooseStove"
      placeholder="请选择报表"
    >
      <el-option
        v-for="item in options"
        :key="item.code"
        :label="item.code"
        :value="item.code"
      >
      </el-option>
    </el-select>
    <div class="card-title">
      <div class="text">装炉</div>
      <div class="code">{{forms.stove.stoveTime}} / {{forms.stove.totalNumber}}支 / {{forms.stove.totalWeight}}吨</div>
    </div>
    <!-- <tables :redColor="true" :tableTypes="items" :tableData="tableTop"></tables> -->
    <div class="tableClass">
      <table>
        <tr class="table_key">
          <td>加工单位</td>
          <td>种类/规格</td>
          <td>数量</td>
          <td>长度</td>
          <td>单重</td>
          <td>重量</td>
        </tr>
        <tr class="table_value" v-for="item in forms.stove.stoveReport||[]" :key="item._id">
          <td>{{item.processUnit}}</td>
          <td>{{item.type}} {{item.specification}}</td>
          <td>{{item.number==0?'':item.number}}</td>
          <td>{{item.length==0?'':item.length}}</td>
          <td>{{item.singleWeight==0?'':item.singleWeight}}</td>
          <td>{{item.weight==0?'':item.weight}}</td>
        </tr>
      </table>
    </div>
    <!--  -->
    <div class="card-title">
      <div class="text">送电</div>
      <div class="code">{{forms.stove.electric.startElectricTime}}</div>
    </div>
    <div class="card-header card-header-center">
      <table>
        <tr class="table_key">
          <td colspan='2'>总第炉数</td>
          <td colspan='2'>送电开始功率</td>
          <td colspan='2'>计划电量</td>
          <td colspan='2'>计划电量</td>
        </tr>
        <tr class="table_value">
          <td colspan='2'>{{forms.stove.electric.totalStoveNum}}</td>
          <td colspan='2'>{{forms.stove.electric.startPower}}</td>
          <td colspan='2'>{{forms.stove.electric.plannedElectricity}}</td>
          <td colspan='2'>{{forms.stove.electric.plannedElectricity}}</td>
        </tr>
        <tr class="table_key">
          <td colspan='2'>装炉柱数</td>
          <td colspan='2'>单柱串接</td>
          <td colspan='2'>截面</td>
          <td colspan='2'>电密</td>
        </tr>
        <tr class="table_value">
          <td colspan='2'>{{forms.stove.electric.stoveColumnNum}}</td>
          <td colspan='2'>{{forms.stove.electric.oneColumnStrand}}</td>
          <td colspan='2'>{{forms.stove.electric.section}}</td>
          <td colspan='2'>{{forms.stove.electric.denseElectricity}}</td>
        </tr>
        <tr class="table_key">
          <td colspan='2'>位移要求</td>
          <td colspan='2'>配重</td>
          <td colspan='2'>保温料</td>
          <td colspan='2'>装炉方式</td>
        </tr>
        <tr class="table_value">
          <td colspan='2'>{{forms.stove.electric.displacementLess}}</td>
          <td colspan='2'>{{forms.stove.electric.counterweight}}</td>
          <td colspan='2'>{{forms.stove.electric.keepWarmMaterial}}</td>
          <td colspan='2'>{{forms.stove.electric.stoveWay}}</td>
        </tr>
        <tr class="table_value" v-for="item in 4" :key="item" >
          <td colspan='2'>{{(item-1)*6}}-{{(item-1)*6+6}}h</td>
          <td>{{forms.stove.electric.powerTime[0 + (item-1)*6].power}}</td>
          <td>{{forms.stove.electric.powerTime[1 + (item-1)*6].power}}</td>
          <td>{{forms.stove.electric.powerTime[2 + (item-1)*6].power}}</td>
          <td>{{forms.stove.electric.powerTime[3 + (item-1)*6].power}}</td>
          <td>{{forms.stove.electric.powerTime[4 + (item-1)*6].power}}</td>
          <td>{{forms.stove.electric.powerTime[5 + (item-1)*6].power}}</td>
        </tr>
      </table>
    </div>
    <div class="card-title">
      <div class="text">停电</div>
      <div class="code">{{forms.stove.electric.stopElectricTime}}</div>
    </div>
    <div class="card-header card-header-center">
      <table>
        <tr class="talbe_key">
          <td colspan='2'>直流电压</td>
          <td colspan='2'>直流电流</td>
          <td colspan='2'>起始炉阻</td>
          <td colspan='2'>停电功率</td>
          <td colspan='2'>停炉炉阻</td>
          <td colspan='2'>吨耗</td>
        </tr>
        <tr class="table_value">
          <td colspan='2'>{{forms.stove.electric.voltage==0?'':forms.stove.electric.voltage}}</td>
          <td colspan='2'>{{forms.stove.electric.electricCurrent==0?'':forms.stove.electric.electricCurrent}}</td>
          <td colspan='2'>{{forms.stove.electric.startStoveResistance==0?'':forms.stove.electric.startStoveResistance}}</td>
          <td colspan='2'>{{forms.stove.electric.stopPower==0?'':forms.stove.electric.stopPower}}</td>
          <td colspan='2'>{{forms.stove.electric.stopStoveResistance==0?'':forms.stove.electric.stopStoveResistance}}</td>
          <td colspan='2'>{{forms.stove.electric.tonConsumption==0?'':forms.stove.electric.tonConsumption}}</td>
        </tr>
        <tr class="talbe_key">
          <td colspan='2'>实际电量</td>
          <td colspan='2'>尖峰</td>
          <td colspan='2'>高峰</td>
          <td colspan='2'>平段</td>
          <td colspan='2'>谷电</td>
        </tr>
        <tr class="table_value">
          <td colspan='2'>{{forms.stove.electric.actualElectricity==0?'':forms.stove.electric.actualElectricity}}</td>
          <td colspan='2'>{{forms.stove.electric.specialPowerTime[0].power==0?'':forms.stove.electric.specialPowerTime[0].power}}</td>
          <td colspan='2'>{{forms.stove.electric.specialPowerTime[1].power==0?'':forms.stove.electric.specialPowerTime[1].power}}</td>
          <td colspan='2'>{{forms.stove.electric.specialPowerTime[2].power==0?'':forms.stove.electric.specialPowerTime[2].power}}</td>
          <td colspan='2'>{{forms.stove.electric.specialPowerTime[3].power==0?'':forms.stove.electric.specialPowerTime[3].power}}</td>
        </tr>
      </table>
    </div>
  </div>
</template>

<script>
// import tables from '@/components/tables/index.vue'
import { graphiteReportGet } from '@/api/graApi.js'
export default {
  components: {
  },
  props: {
    stoveCode: {
      type: String,
      default () {
        return ''
      }
    },
    getTime: {
      type: String,
      default () {
        return ''
      }
    }
  },
  data () {
    return {
      options: [],
      stoveValue: '',
      twoStove: true,
      twoStoveSelect: true,
      forms: {
        stove: {
          electric: {
            powerTime: [
              { power: '' }
            ],
            specialPowerTime: [
              { power: '' },
              { power: '' },
              { power: '' },
              { power: '' },
              { power: '' }
            ]
          }
        }
      },
      form: {
        stove: {
          electric: {
            powerTime: [
              { power: '' }
            ],
            specialPowerTime: [
              { power: '' },
              { power: '' },
              { power: '' },
              { power: '' },
              { power: '' }
            ]
          }
        }
      }
    }
  },
  watch: {
    twoStoveSelect: {
      handler (newData) {
        const form = newData ? this.form[0] : this.form[1]
        this.forms = form
      }
    }
  },
  created () {
    for (let index = 0; index < 24; index++) {
      this.forms.stove.electric.powerTime.push({})
    }
    this.$axios
    // .get('http://172.20.10.2/graReport/getHisStove')
      .get('http://81.70.155.101:8060/graReport/getHisStove?app=stove')
      .then((res) => {
        this.options = res.data.data
        this.stoveValue = this.options[0] // 默认选中
        this.getData(this.stoveValue)
      })
  },
  mounted () {
    // this.getData()
  },
  methods: {
    // 筛选框change触发
    chooseStove (val) {
      let value = {}
      for (let index = 0; index < this.options.length; index++) {
        const element = this.options[index]
        const condition = element.code === val
        if (condition) {
          value = element
        }
      }
      this.getData(value)
    },
    // getCode () {
    //   var time = this.getTime
    //   time = time.replace(/-/g, '')
    //   time = time.replace(/\s/g, '')
    //   time = time.replace(/:/g, '')
    //   time = time.slice(0, -2)
    //   console.log('time', time)
    //   const stove = this.stoveCode < 10 ? 0 + this.stoveCode : this.stoveCode
    //   const code = 'SMH' + time + 'L' + stove
    //   return code
    // },
    timeSet (time) {
      var value = time
      return value.slice(5, -3)
    },
    getData (code) {
      var startTime = code.startTime || ''
      var endTime = code.endTime || ''
      const payload = {
        startTime: startTime,
        endTime: endTime
      }
      graphiteReportGet(payload).then(res => {
        if (res.data.code === 200) {
          console.log('装炉数据获取成功', res)
          var form = res.data.data.pageData || []
          if (form.length && form.length === 2) {
            this.twoStove = true
            this.forms = form[0]
          } else if (form.length && form.length === 1) {
            this.forms = form[0]
            this.twoStove = false
          } else if (!form.length || form.length > 2) {
            this.forms = {
              stove: {
                electric: {
                  powerTime: [
                    { power: '' }
                  ],
                  specialPowerTime: [
                    { power: '' },
                    { power: '' },
                    { power: '' },
                    { power: '' },
                    { power: '' }
                  ]
                }
              }
            }
            for (let index = 0; index < 24; index++) {
              this.forms.stove.electric.powerTime.push({})
            }
          }
          this.form = form
        } else {
          this.$message({
            message: res.data.message
          })
        }
      })
    },
    getRowClass ({ row, column, rowIndex, columnIndex }) {
      if (rowIndex === 0) {
        return 'background: rgb(48,52,61);color: rgb(221,224,232);font-weight: unset;font-size: 12px;padding-left: 0px'
      } else {
        return ''
      }
    }
  }
}
</script>

